<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body::-webkit-scrollbar {
				width: 0;
				display: none;
			}
			.box {
				display: flex;
				overflow-x: scroll;
				/* 吸附效果 */
				scroll-snap-type: x mandatory;
				scroll-behavior: smooth;
				
			}
			.box div {
				width: 100%;
				height: 100vh;
				flex-shrink: 0;
				/* 吸附对齐方法 */
				scroll-snap-align: start;
				/* scroll-snap-stop: always; */
			}
			.box div:nth-child(1) {
				background-color: #57bc4a;
			}
			.box div:nth-child(2) {
				background-color: #f2b546;
			}
			.box div:nth-child(3) {
				background-color: #e85e52;
			}
			.box div:nth-child(4) {
				background-color: #2d68dd;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>